<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<jsp:include page="/header/Header.jsp"></jsp:include>
<script type="text/javascript" src="/common/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var uid;
	var pwd;
	var flag;
	var cpwd;
	var pflag;
	var pwflag;
	
  $("input[name=uid]").keyup(function(){
		uid = $(this).val();
	if(uid.length >= 6 && 12 >= uid.length){
	 	$.ajax({
				type:"post",
				url:"/ac/idcheck.tump",
				dataType:"html",
				data:"uid="+uid+"",
				success:function(call){
					if(call==1){
					$("#j").css("color","red").text("중복되는 아이디 입니다.");
					$("input[name=pwd]").val("");
					flag= false;
					
					}else{
					$("#j").css("color","blue").text("사용하셔도 좋은 아이디 입니다.");
					flag= true;
				    }
				}
			});
	 }else{
		 $("#j").css("color","black").text("6자리이상 12자리 이하(영문or번호)");
	 }if(uid.length > 12){
		 alert("아이디의 길이가 벗어납니다.");
		 $(this).val("");
		 $(this).focus();
	 }
 }); // input[name=uid] keyup end
 
   $("input[name=pwd]").keyup(function(){
			pwd =  $(this).val();
			if(flag == false){
				alert("중복된 아이디 입니다. 다시 입력하여 주세요!");
				$("input[name=pwd]").val("");
				$("input[name=uid]").focus();
				return;
			}
			if(pwd.length >= 6 && 12 >= pwd.length){
				$("#a").css("color","red").text("사용하셔도 좋은 비밀번호 입니다.");
				pflag = true;
			}else{
				$("#a").css("color","red").text("길이가 길거나 짧습니다.");
				$("input[name=cpwd]").val("");
				pflag = false;
			}
		}); // input[name=pwd] keyup end
	
	$("input[name=cpwd]").keyup(function(){
			cpwd = $(this).val();
			if(pflag == false){
				alert("비밀번호를 다시 입력하여 주세요");
				$(this).val("");
				$("input[name=pwd]").focus();
				return;
			}
			if(pwd == cpwd){
				$("#b").css("color","red").text("비밀번호가 맞습니다.");
				pwflag=true;
			}else{
				$("#b").css("color","red").text("비밀번호가 맞지않습니다.");
				pwflag=false;
			}
       }); // input 비밀번호확인 end 
     
    $("#popup").click(function(){
    	
    	open("/ac/zipcode.tump","NewWindow","left=100,top=100,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=450,height=400");
    }); // 팝업창 클릭 end
    
    $("input[name=repwd]").keyup(function(){
    	if(pwflag == false){
    		alert("비밀번호가 맞지 않습니다. 다시 입력해주세요");
    		$(this).val("");
    		$("input[name=cpwd]").focus();
    	}
    	
    });
   
    history.go(1);
       
});
</script>
</head>
<body>
<form method="post" action="/ac/joinOk.tump">
	<table border=1 width="1000px" height="1000px">
		<tr>
			<td width="10%">1</td>
			<td valign="top">
				<table cellpadding="1"height="50%" width="100%" border="1">
					<tr>
						<td colspan="4" height="100px"></td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">아이디</td>
						<td height="30px" width="10px">&nbsp;<input style='IME-MODE: disabled' name="uid" type="text" size="15"/>&nbsp;<font id="j" size="2.0em" color="black">6자리이상 12자리 이하(영문or번호)</font></td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">비밀번호</td>
						<td height="30px" width="10px">&nbsp;<input name="pwd" type="password" size="15"/><font id="a" size="2.0em" color="black"> 6~12 자리 입력하세요</font></td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">비밀번호확인</td>
						<td height="30px" width="10px">&nbsp;<input name="cpwd" type="password" size="15"/><font id="b" size="2.0em" color="black"></font></td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">비밀번호 확인시 질문</td>
						<td height="30px" width="10px">&nbsp;<select name="hint" class="select">
			 <option value='기억에 남는 추억의 장소는?'  >기억에 남는 추억의 장소는?</option>
			 <option value='자신의 인생 좌우명은?'  >자신의 인생 좌우명은?</option>
			 <option value='자신의 보물 제1호는?'  >자신의 보물 제1호는?</option>
			 <option value='가장 기억에 남는 선생님 성함은?'  >가장 기억에 남는 선생님 성함은?</option>
			 <option value='타인이 모르는 자신만의 신체비밀이 있다면?'  >타인이 모르는 자신만의 신체비밀이 있다면?</option>
			 <option value='추억하고 싶은 날짜가 있다면?'  >추억하고 싶은 날짜가 있다면?</option>
			 <option value='받았던 선물 중 기억에 남는 독특한 선물은?'  >받았던 선물 중 기억에 남는 독특한 선물은?</option>
			 <option value='유년시절 가장 생각나는 친구 이름은?'  >유년시절 가장 생각나는 친구 이름은?</option>
			 <option value='인상 깊게 읽은 책 이름은?'  >인상 깊게 읽은 책 이름은?</option>
			 <option value='읽은 책 중에서 좋아하는 구절이 있다면?'  >읽은 책 중에서 좋아하는 구절이 있다면?</option>
			 <option value='자신이 두번째로 존경하는 인물은?'  >자신이 두번째로 존경하는 인물은?</option>
			 <option value='친구들에게 공개하지 않은 어릴 적 별명이 있다면?'  >친구들에게 공개하지 않은 어릴 적 별명이 있다면?</option>
			 <option value='초등학교 때 기억에 남는 짝꿍 이름은?'  >초등학교 때 기억에 남는 짝꿍 이름은?</option>
			 <option value='다시 태어나면 되고 싶은 것은?'  >다시 태어나면 되고 싶은 것은?</option>
			 <option value='내가 좋아하는 캐릭터는?'  >내가 좋아하는 캐릭터는?</option>
                        </select>
						</td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">비밀번호 확인시 답변</td>
						<td height="30px" width="10px">&nbsp;<input name="repwd" type="text" size="25"/></td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">이름</td>
						<td height="30px" width="10px">&nbsp;<input type="text" name=name size="25"/></td>
					</tr>
					<tr>
						<td align="center" height="90px" width="25%">주소</td>
						<td height="30px" width="10px">
						 <table width="510" border="0" cellspacing="0" cellpadding="0">
                          <tr> 
                            <td height="26"> 
                              &nbsp;<input type=text size=10 name="zip1" value="" class="input01" readonly>
                              - 
                              <input type=text size=10 name="zip2" value="" class="input01" readonly>
                              <img id="popup" src="http://img0001.echosting.cafe24.com/front/type_b/image/member_register/8.gif" name="image" align="absmiddle" border="0" onclick="javascript:window_open( '/front/php/zipcode_search/zipcode_search.php?'+'page=member_regist_f&zip1=zip1&zip2=zip2&addrs=addr1&form=frm', 'addr_search' ,200, 100, 466, 450 )" style="cursor:hand">
                            </td>
                          </tr>
                          <tr> 
                            <td height="26"> 
                              &nbsp;<input type=text size=50 name="addr1" value="" class="input01" readonly>
          				   기본주소</td>
                          </tr>
                          <tr> 
                            <td height="26"> 
                              &nbsp;<input type=text size=50 name="addr2" value="" class="input01">
                                                         나머지주소</td>
                          </tr>
                        </table>
						
						
						
						
						</td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">유선전화</td>
						<td height="30px" width="10px">  
						&nbsp;<input type=text size=5 name="phone1" value="" class="input01" maxlength=4>
                        - 
                        <input type=text size=5 name="phone2" value="" class="input01" maxlength=4>
                        - 
                        <input type=text size=5 name="phone3" value="" class="input01" maxlength=4>
						</td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">휴대전화</td>
						<td height="30px" width="10px">
						&nbsp;<select name='mobile1'>
				<option value=''>없음</option>
					<option value='010' >010</option>
					<option value='011' >011</option>
					<option value='016' >016</option>
					<option value='017' >017</option>
					<option value='018' >018</option>
					<option value='019' >019</option>
					<option value='070' >070</option>
			</select>     - 
                        <input type=text size=5 name="mobile2" value="" class="input01" maxlength=4>
                        - 
                        <input type=text size=5 name="mobile3" value="" class="input01" maxlength=4>
			
						</td>
					</tr>
					<tr>
						<td align="center" height="30px" width="25%">이메일</td>
						<td height="30px" width="10px">
						       <table width="510" border="0" cellspacing="0" cellpadding="0">
                          <tr> 
                            <td height="26"> 
				  	<input type=text size=10 name="email1" value="" class="input01">
			    </td>
			    <td>@</td>
			    <td>
			      <select name="email2" onchange="javascript:ch_email_form( this.form )">
                                <option value="">::::::::::: 선택 :::::::::::</option>
				<option value="chol.com">chol.com
				<option value="daum.net">daum.net
				<option value="dreamwiz.com">dreamwiz.com
				<option value="empal.com">empal.com
				<option value="gmail.com">gmail.com
				<option value="hanmail.net">hanmail.net
				<option value="hanmir.com">hanmir.com
				<option value="hanafos.com">hanafos.com
				<option value="hotmail.com">hotmail.com
				<option value="lycos.co.kr">lycos.co.kr
				<option value="nate.com">nate.com
				<option value="naver.com">naver.com
				<option value="paran.com">paran.com
				<option value="yahoo.co.kr">yahoo.co.kr
				<option value="etc" >직접입력
                              </select>
                            </td>
			    <td id="etc_email" style="display:none">
                             &nbsp;<input type=text size=20 name="email3" value="" class="input01">
			    </td>
			    <td width="300">&nbsp;</td>
                          </tr>
                          <tr> 
                            <td height="20" colspan=5> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/member_register/9.gif" align="absmiddle"> 
			    주문 및 배송확인 정보 등이 E-mail로 발송되므로 반드시 수신가능한 E-mail 주소를 입력<br>하여주십시오.
			    </td>
                          </tr>
			  <tr>
			    <td colspan=5></td>
			  </tr>
                        </table></td>
					</tr>
				<tr>
		  <td align="center" height="30px" width="25%">생년월일</td>
	      <td bgcolor="#FFFFFF" colspan=3>
	      		<input type=text size=4 name="cal1" value="" class="input01" maxlength=4> 년
	      		<input type=text size=2 name="cal2" value="" class="input01" maxlength=2> 월
	      		<input type=text size=2 name="cal3" value="" class="input01" maxlength=2> 일
	      		<input type='radio' name='cal_solar' value='양력' checked> 양력
	      		<input type='radio' name='cal_solar' value='음력' > 음력
	      </td>
	    </tr>
		  	<tr>
      			<td align="center" height="30px" width="25%">지역</td>
      			<td height=10 colspan=3 bgcolor="#FFFFFF" width="510">
				<select name="region" style="width:150">
					<option value='region_00'  >선택</option><option value='경기'  >경기</option>
					<option value='서울'  >서울</option>
					<option value='인천'  >인천</option>
					<option value='강원'  >강원</option>
					<option value='충남'  >충남</option>
					<option value='충북'  >충북</option>
					<option value='대전'  >대전</option>
					<option value='경북'  >경북</option>
					<option value='경남'  >경남</option>
					<option value='대구'  >대구</option>
					<option value='부산'  >부산</option>
					<option value='울산'  >울산</option>
					<option value='전북'  >전북</option>
					<option value='전남'  >전남</option>
					<option value='광주'  >광주</option>
					<option value='제주'  >제주</option>
					<option value='해외'  >해외</option>
				</select>
      		</td>
    	</tr>
		</table>
		<table width=100% >
		<tr>
		
		<td height="55px" align="center">		
    	<input type="submit" value="회원가입"/>&nbsp;<input type="button" value="취소"/>
    	</td>
    	</tr>
		</table>

				</tr>
	
				</table>
			</td>
			<td width="10%">3</td>
		</tr>
		
	</table>
</form>	
</body>
</html>